<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Element UI 扩展</title>
    <link href="./wwwroot/elementui/index.min.css" rel="stylesheet" /> 
    <style scoped>
    </style>
</head>
<body>
    <div id="main" v-cloak style="width:600px;">
        <el-button type="primary" size="small" icon="el-icon-plus" v-on:click="footerVisible = true;dialogVisible=true;">新建任务</el-button>
        <el-button type="default" size="small" icon="el-icon-view" v-on:click="footerVisible = false;view();">查看</el-button>

        <el-button type="default" size="small" icon="el-icon-view" v-on:click="footerVisible = true;loadData();">初始化</el-button>

        <el-extend-form :form-json="formJson" :submit="submitForm" :form-data="formData" v-loading.fullscreen.lock="loading"
                        :dialog-width="dialogWidth" :dialog-visible="dialogVisible" :cancel="handleClose" :footer-visible="footerVisible"></el-extend-form>
    </div>

    <script type="text/javascript" src="./wwwroot/vue/vue.js?v=2.0"></script>
    <script type="text/javascript" src="./wwwroot/vue/vue-i18n.min.js?v=2.0"></script>
    <script type="text/javascript" src="./wwwroot/elementui/index.min.js"></script> 
    <script type="text/javascript" src="./wwwroot/vue/axios.min.min.js"></script> 

    <script>
       

        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    dialogTitle:"",
                    dialogVisible: false,
                    footerVisible: true, 
                    dialogWidth: "40%",
                    buttonSize: "small",

                    loading: false,
                    formData: {},
                    formJson: [
                        {
                            type: 'input',
                            label: '大大姓名',
                            prop: 'name',
                            default: '', // 默认值为空字符串
                            rules: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
                        },
                        {
                            type: 'select',
                            label: '性别',
                            prop: 'gender', default: null, // 对于选择类型，默认值可以设置为 null
                            options: [
                                { label: '男', value: 'male' },
                                { label: '女', value: 'female' }
                            ],
                            rules: [{ required: true, message: '性别不能为空' }]
                        }, {
                            type: 'switch',
                            label: '是否同意',
                            prop: 'isAgree',
                            default: false, // 开关默认状态为 false，表示关闭
                            rules: [{ required: true, message: '请确认是否同意', trigger: 'change' }]
                        },
                        {
                            type: 'datetimepicker',
                            label: '预约时间',
                            prop: 'appointmentTime',
                            default: null, // 可以设置默认值，也可以不设置
                            placeholder: '请选择预约时间',
                            format: 'yyyy-MM-dd HH:mm:ss',
                            valueFormat: 'yyyy-MM-dd HH:mm:ss',
                            dateTimePickerType: 'datetime', // 可以是 'date' | 'datetime' | 'year' | 'month' | 'time' 等
                            rules: [
                                { required: true, message: '预约时间不能为空', trigger: 'change' }
                            ]
                        },
                        {
                            type: 'number', // 新增的数字输入框类型
                            label: '数量',
                            prop: 'quantity',
                            min: 1, // 最小值
                            max: 100, // 最大值
                            step: 1, // 步长
                            placeholder: '请输入数量', // 占位符
                            default: 1, // 默认值
                            rules: [{ required: true, message: '数量不能为空', trigger: 'blur' },
                            { type: 'number', message: '数量必须为数字', trigger: 'blur' }]
                        },
                        {
                            type: 'radio',
                            label: '爱好',
                            prop: 'hobby', default: undefined, // 单选默认值可以设置为 undefined 或第一个选项的值
                            options: [
                                { label: '足球', value: 'soccer' },
                                { label: '篮球', value: 'basketball' }
                                // 可以添加更多选项
                            ],
                            rules: [{ required: true, message: '请选择爱好', trigger: 'change' }]
                        },
                        {
                            type: 'checkbox',
                            label: '技能',
                            prop: 'skills', default: [], // 多选默认值应为数组
                            options: [
                                { label: '编程', value: 'coding' },
                                { label: '设计', value: 'design' },
                                { label: '测试', value: 'test' },
                                { label: '部署', value: 'uat' },
                            ],
                            rules: [{ required: true, message: '请选择至少一个技能', trigger: 'change' }]
                        },
                        {
    "label": "选择日期",
    "prop": "appointmentDate",
    "type": "date",
    "placeholder": "请选择日期",
    "required": true
}, {
    "label": "选择月份范围",
    "prop": "monthRange",
    "type": "monthrange",
    "placeholder": "请选择月份范围",
    "required": false
}, {
    "label": "选择日期范围",
    "prop": "dateRange",
    "type": "daterange",
    "placeholder": "请选择日期范围",
    "required": true
},
{
    "label": "选择项目",
    "prop": "project",
    "type": "select",
    "placeholder": "请选择项目",
    "required": true,
    "options": [
        {
            "label": "项目A",
            "value": "projectA"
        },
        {
            "label": "项目B",
            "value": "projectB"
        }
    ]
}, {
    "label": "选择地区",
    "prop": "region",
    "type": "cascader",
    "placeholder": "请选择地区",
    "required": true,
    "cascaderData": [
        {
            "value": "zhejiang",
            "label": "浙江",
            "children": [
                {
                    "value": "hangzhou",
                    "label": "杭州"
                },
                {
                    "value": "ningbo",
                    "label": "宁波"
                }
            ]
        },
        {
            "value": "jiangsu",
            "label": "江苏",
            "children": [
                {
                    "value": "nanjing",
                    "label": "南京"
                },
                {
                    "value": "suzhou",
                    "label": "苏州"
                }
            ]
        }
    ]
},
                    ],
                }
            },
            created() {
              
            },
       
            methods: {
                handleClose(e) {
                    this.dialogVisible = e;
                },
                submitForm(data) {
                    console.log("==================================", data)
                    
                },
                loadData(index, row) {
                    var that = this;
                    that.dialogVisible = true;
                    that.formData = {};
                     
                    if (that.dialogVisible) {
                        that.formData = {
                            "name": "sadsadsa",
                            "gender": "male",
                            "isAgree": true,
                            "appointmentTime": "2024-08-19 18:49:23",
                            "quantity": 1,
                            "hobby": "soccer",
                            "skills": [
                                "design",
                                "test"
                            ]
                        };
                    }
                    else {
                        that.formData = {
                            "name": "没有名称",
                            "gender": "female",
                            "hobby": "soccer",
                            "skills": ["coding", "test"]
                        };
                    }
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                    }, 1000);
                },

                view() {
                    this.dialogVisible = true;
                    this.footerVisible = false;
                },
            },
            filters: {

            }
        });



    </script>
</body>
</html>
